// stylelint-disable-next-line
$component-name: skeleton;

.#{$component-name} {
  width: 100%;
  height: var(--cdk-size-32);
  background: linear-gradient(90deg, var(--cdk-primary-400) 40%, var(--cdk-primary-300), var(--cdk-primary-400) 60%);
  background-position-x: 180%;
  background-size: 200% 100%;
  border-radius: var(--cdk-size-2);
  animation: skeleton-animation 2s ease-in-out infinite;

  &--line {
    width: 100%;
    height: var(--cdk-size-16);
  }

  &--checkbox {
    width: var(--cdk-size-20);
    height: var(--cdk-size-20);
    border-radius: var(--cdk-size-2);
  }

  &--img {
    &-square {
      width: 100%;
      height: auto;
      aspect-ratio: 1 / 1;
    }
  }

  &--cell {
    width: 100%;
    height: var(--cdk-size-32);
  }

  &--xs {
    height: var(--cdk-size-14);
  }

  &--sm {
    height: var(--cdk-size-16);
  }

  &--md {
    height: var(--cdk-size-24);
  }

  &--lg {
    height: var(--cdk-size-32);
  }

  &--xl {
    height: var(--cdk-size-40);
  }

  &--xxl {
    height: var(--cdk-size-64);
  }

  &--3\/4 {
    width: 75%;
  }

  &--2\/3 {
    width: 66.66%;
  }

  &--1\/2 {
    width: 50%;
  }

  &--1\/3 {
    width: 33.33%;
  }

  &--1\/4 {
    width: 25%;
  }

  &--self-right {
    justify-self: end;
  }
}

/* Animations */
@keyframes skeleton-animation {
  100% {
    background-position-x: -20%;
  }
}
